<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">数组</a></li>
  <li class="active">json数组管理</li>
</ol>
<h2>数组工具类使用前请安装：npm i great-jsutils --save</h2>
<div class="panel panel-primary">
  <div class="panel-heading">默认形式</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-xs-6">
    <textarea class="form-control" rows="14"  name="json1Str"
              [(ngModel)]="json1Str"
    ></textarea>
      </div>
      <div class="col-xs-6 highlight json" style="overflow: auto;height:300px;">
        <div class="json">
          <div [innerHTML]="json1HtmlStr"></div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="btn-group" role="group" aria-label="...">
          <button type="button" class="btn btn-success" (click)="add()"> 添 加 </button>
          <button type="button" class="btn btn-danger" (click)="remove()"> 移 除 </button>
          <button type="button" class="btn btn-warning" (click)="update()"> 更 新 </button>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-footer">
    <div>
      添加：ArrayUtils.add(jsonArray, childrenJson);
    </div>
    <div>
      移除：ArrayUtils.remove(jsonArray, childrenJson);
    </div>
    <div>
      更新：ArrayUtils.update(jsonArray, childrenJson);
    </div>
  </div>
</div>
<img src="./assets/images/jsutils/jsutils-array01.gif"/>
<!--
    setTimeout( () => {
        this.highlightJsService.highlight(this.el.nativeElement.querySelector('.highlight'));
    }, 100);
-->
